<template>
    <div class="commission page">
<!--        <cube-scroll-->
<!--            :data="userForm"-->
<!--            :options="options"-->
<!--            @pulling-up="searchCommission"-->
<!--        >-->
            <div class="content">
                <div class="commissionTop">
                    <div class="topImg"><img :src="user.userEntity.avatar"/></div>
                    <div class="topMsg">
                        <div class="msgName">{{user.userEntity.name}}</div>
                        <div class="msgMobile">手机: {{user.userEntity.mobile}}</div>
                        <div class="msgFans">
                            <span>总推广: {{user.agentNum}}</span>
                            <span style="margin-left:0.40rem">总粉丝: {{user.fansNum}}</span>
                        </div>
                    </div>
                    <!--<div class="topBtn">修改月份</div>-->
                    <cube-button class="topBtn" @click="showDatePicker">修改月份</cube-button>
                </div>
                <div class="commissionAmount">
                    <div class="amountItem">
                        <div class="amountItemMoney">
                            <span class="integer">{{total}}</span>
                        </div>
                        <div class="amountItemDescribe">
                            <div>返利总金额</div>
                            <div>(元)</div>
                        </div>
                    </div>
                    <div class="division">|</div>
                    <div class="amountItem">
                        <div class="amountItemMoney">

                            <span class="integer">{{totalWait}}</span>
                        </div>
                        <div class="amountItemDescribe">
                            <div>待审核佣金</div>
                            <div>(元)</div>
                        </div>
                    </div>
                    <div class="division">|</div>
                    <div class="amountItem">
                        <div class="amountItemMoney">

                            <span class="integer">{{totalDown}}</span>
                        </div>
                        <div class="amountItemDescribe">
                            <div>已到账佣金</div>
                            <div>(元)</div>
                        </div>
                    </div>

    <!--                <div class="division">|</div>-->
    <!--                <div class="amountItem">-->
    <!--                    <div class="amountItemMoney">-->
    <!--                        <span class="integer" style="visibility:hidden">0.00</span>-->
    <!--                    </div>-->
    <!--                    <div class="amountItemDescribe">-->
    <!--                        <div>已提现</div>-->
    <!--                        <div>(元)</div>-->
    <!--                    </div>-->
    <!--                </div>-->
                </div>

                <div class="userForm">
                    <table class="form">
                        <tr class="formHead">
                            <th>时间</th>
                            <th>订单信息</th>

                            <th>电话号码</th>
                            <th>返点金额</th>
                            <!--<th>备注</th>-->
                        </tr>
                        <tr class="formItem" v-for="item of userForm" :key="item.index" @click="turn(item.remark)">
                            <td class="time">{{item.time}}</td>
                            <td class="money">{{item.info}}</td>
                            <td class="tel">{{item.mobile}}</td>
                            <td class="rebate">{{item.income}}元</td>
                            <!--<td class="remark">{{item.remark}}</td>-->
                        </tr>
                    </table>
                </div>
            </div>
<!--        </cube-scroll>-->
    </div>
</template>

<script>
    // import {info} from "../../api/user"
    import {searchCommission,searchFansNum} from "../../api/commission"
    import {showLoading} from "../../toast";
    import {hide} from "../../toast";
    export default {
        name : "index",
        data(){
            return {
                selectedYear:'',
                selectedMonth:'',
                user:{
                        userEntity : {
                            avatar : ''
                        }
                    },
                userForm:[],
                totalDown:'',
                totalWait:'',
                total:'',
                page:1,
                options:{
                    pullUpLoad: true
                }
            }
        },
        activated(){
            // info().then(res=>{
            //     this.user = res.data
            // })
            searchFansNum().then(res=>{
                this.user = res.data
                this.totalDown = res.data.totalDone
                this.totalDown = this.totalDown.toFixed(2)
                this.totalWait = Number(res.data.totalWait).toFixed(2)
                this.total = Number(this.totalDown)+ Number(this.totalWait)
            })
        },
        mounted(){
            this.userForm=[]
            // let nowData = new Date()
            // this.selectedYear = nowData.getFullYear()
            // this.selectedMonth = nowData.getMonth()+1
            // setTimeout(()=>{
            this.searchCommission()
            // },500)
        },
        computed:{

        },
        methods: {

            showDatePicker() {
                let nowData = new Date()
                if (!this.datePicker){
                    this.datePicker = this.$createDatePicker({
                        title: '选择月份',
                        min: new Date(2018, 1),
                        max: new Date(nowData.getFullYear(), nowData.getMonth()),
                        value: nowData,
                        columnCount:2,
                        onSelect: this.selectHandle,
                        /*onCancel: this.cancelHandle*/
                    })
                }

                this.datePicker.show()
            },
            selectHandle(date, selectedVal, selectedText) {
                this.selectedYear = selectedVal[0]
                this.selectedMonth = selectedVal[1]
                this.$createDialog({
                    type: 'warn',
                    content: `将日期修改为${selectedVal.join('年')}月成功`
                }).show()
                this.userForm=[]
                this.searchCommission()
            },
            /*cancelHandle() {
                this.$createToast({
                    type: 'correct',
                    txt: 'Picker canceled',
                    time: 1000
                }).show()
            }*/
            async searchCommission(){
                let year = this.selectedYear
                let month = this.selectedMonth
                showLoading('正在加载')
                searchCommission(year,month).then(res=>{
                    this.userForm = res.data
                    hide()
                })

            },
            turn(remark){
                this.$router.push({
                    path:`/order/detail?info=${remark}`
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
.commission
    width 10.00rem
    background url("../../assets/redbg.png") no-repeat
    background-size 10.00rem 4.80rem
    padding-top 0.61rem
    /*padding 0 0.40rem*/
    height 100vh
    .content
        width 9.20rem
        margin 0 auto
    .commissionTop
        width 100%
        height 1.63rem
        display flex
        justify-content space-between
        align-items center
        .topImg
            width 1.63rem
            height 1.63rem
            border-radius 50%
            img
                width 100%
                height 100%
                border-radius 50%
                border 1px solid #F22700
        .topMsg
            color #FFFFFF
            height 100%
            display flex
            flex-direction column
            align-items left
            justify-content space-between
            margin-right 0.53rem
            /*align-items center*/
            .msgName
                font-size 0.45rem
            .msgMobile
                font-size 0.29rem
            .msgFans
                font-size 0.29rem
        .topBtn
            color #F2270C
            font-size 0.33rem
            padding 0 0.40rem
            background-color #fff
            height 0.67rem
            display flex
            align-items center
            border-radius 0.33rem
            width auto
    .commissionAmount
        /*width 100%*/
        height 2.48rem
        border-radius 0.20rem
        background-color #fff
        box-shadow 0 0 0.01rem #F2270C
        margin-top 0.67rem
        display flex
        padding 0 0.27rem
        justify-content space-between
        align-items center
        .amountItem
            .amountItemMoney
                display flex
                justify-content center
                align-items flex-end
                color #333333
                .integer
                    font-size 0.53rem
                    font-weight bold
                .decimal
                    display table-cell
                    vertical-align bottom
                    font-size 0.32rem
                    line-height  0.32rem
                    height 0.32rem
            .amountItemDescribe
                margin-top 0.25rem
                color #999999
                font-size 0.29rem
                div
                    display flex
                    justify-content center
                    white-space nowrap
        .division
            width 0.03rem
            height 0.40rem
            color #D4D4D4
            font-size 0.40rem
            /*margin 0 0.40rem*/
    .form
        margin-top 0.67rem
        width 100%
        .formHead
            background-color #F55742
            color #fff
            font-size 0.35rem
            height 1.41rem
            padding 0 0.20rem
            th
                height 100%
                padding 0.53rem 0.27rem
                vertical-align middle
        .formItem
            color #333333
            font-size 0.27rem
            height 1.33rem
            padding 0 0.20rem
            width 100%
            background-color #f5f5f5
            border-top 0.05rem solid #fff
            td
                height 1.33rem
                text-align center
                vertical-align middle
            .time
                width 0.76rem
            .tel
                width 2.05rem
            .name
                width 1.48rem
            .money
                width 0.63rem
            .rebate
                width 0.79rem
            .remark
                width 1.04rem

</style>
